<template>
  <view class="wrap">
	  <u-form :model="form">
    <view class="top">
      <view class="item">
        <view class="left">收货人</view>
        <input type="text" v-model="form.consignee" placeholder-class="line" placeholder="请填写收货人姓名" />
      </view>
      <view class="item">
        <view class="left">手机号码</view>
        <input type="number" v-model="form.mobile" placeholder-class="line" placeholder="请填写收货人手机号" />
      </view>
      <view class="item" @tap="getArea">
        <view class="left">所在地区</view>
        <input disabled type="text" v-model="form.region"  placeholder-class="line" placeholder="省市区县、乡镇等" :value="province_name + city_name + district_name" />
      </view>
      <view class="item address">
        <view class="left">详细地址</view>
        <textarea type="text" v-model="form.address" placeholder-class="line" placeholder="街道、楼牌等" />
      </view>
    </view>
    <view class="bottom">
      <view class="default">
        <view class="left">
          <view class="set">设置默认地址</view>
          <view class="tips">提醒：每次下单会默认推荐该地址</view>
        </view>
        <view class="right"><switch color="red" :checked="is_default" @change="setDefault" /></view>
      </view>
    </view>
    <view class="addSite" @tap="submit">
      <view class="add">
        <view v-if="!address_id">
          <u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>
          新建收货地址
        </view>
        <text v-else>编辑收货地址</text>
      </view>
    </view>
	</u-form>
    <!-- 地址选择组件 -->
    <u-select v-model="show" mode="mutil-column-auto" :list="areaData" label-name="name" value-name="id" @confirm="confirm"></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      areaData: null,
      is_default: false,
      province_name: '',
      city_name: '',
      district_name: '',
      form: {
        is_default: 0,
        consignee: '',
        mobile: '',
		region:'',
        address: '',
        province: 0,
        city: 0,
        district: 0
      },
      address_id: null,
      type: ''
    };
  },
  onLoad(options) {
    this.address_id = options.address_id;
    this.type = options.type;
    if (this.address_id>0) {
      this.getData();
    }
  },
  methods: {
    getData() {
      this.$api.get({
        url: 'portal/my/get_address_info',
        data: {
          address_id: this.address_id
        },
        success: res => {
          this.form = res.data;
          this.is_default = this.form.is_default == 1 ? true : false;
          this.province_name = this.form.province_name;
          this.city_name = this.form.city_name;
          this.district_name = this.form.district_name;
        }
      });
    },
    setDefault(e) {
      this.form.is_default = e.detail.value ? 1 : 0;
    },
    getArea() {
      if (this.areaData) {
        this.show = true;
        return;
      }
      // this.$loading();
	  // uni.showLoading();
      this.$api.get({
        url: 'user/address/getArea',
        success: res => {
          let area = res.data;
          area[0]['children'][0]['children'] = [{ name: '' }]; // 兼容北京数据
          area[32]['children'] = [{ children: [{ name: '' }] }]; // 兼容澳门数据
          if (res.code == 1) {
            this.areaData = area;
            this.show = true;
          } else {
            this.$toast(res.msg);
          }
        },
        complete: () => {
          // uni.hideLoading();
        }
      });
    },
    confirm(e) {
      // id和name做区分是为了跟PC端的规则同步，不是刻意做复杂的
      if (e[0].label) {
        this.province_name = e[0].label;
        this.form.province = e[0].value;
      } else {
        this.province_name = '';
        this.form.province = 0;
      }
      if (e[1].label) {
        this.city_name = e[1].label;
        this.form.city = e[1].value;
      } else {
        this.city_name = '';
        this.form.city = 0;
      }
      if (e[2].label) {
        this.district_name = e[2].label;
        // this.form.region = e[2].value;
      } else {
        this.district_name = '';
        // this.form.region = 0;
      }
	  
	  this.form.region = this.province_name + this.city_name + this.district_name;
    },
    submit() {
      if (this.form.consignee == '') {
        this.$toast('请输入收货人姓名');
        return;
      }
      if (this.form.mobile == '') {
        this.$toast('请输入手机号');
        return;
      }
      // if (this.form.region == '') {
      //   this.$toast('请选择地区');
      //   return;
      // }
      // if (this.form.address == '') {
      //   this.$toast('请输入详细地址');
      //   return;
      // }
      // this.$loading();
	  // uni.showLoading();
	  console.log(this.form)
      this.$api.post({
        url: 'portal/my/save_address',
        data: this.form,
        success: res => {
          if (res.code == 1) {
            if (this.type == 'select') {
              this.$store.commit('storeAddress', res.data);
            }
            uni.navigateBack();
          } else {
            this.$toast(res.msg);
          }
        },
        complete: () => {
          // uni.hideLoading();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .line {
  color: $u-light-color;
  font-size: 28rpx;
}
.wrap {
  background-color: #f2f2f2;
  .top {
    background-color: #ffffff;
    border-top: solid 2rpx $u-border-color;
    padding: 22rpx;
    .item {
      display: flex;
      font-size: 32rpx;
      line-height: 100rpx;
      align-items: center;
      border-bottom: solid 2rpx $u-border-color;
      .left {
        width: 180rpx;
      }
      input {
        text-align: left;
      }
    }

    .address {
      padding: 20rpx 0;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
    }
    .site-clipboard {
      padding-right: 40rpx;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
      .clipboard {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: $u-tips-color;
        height: 80rpx;
        .icon {
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
  .bottom {
    margin-top: 20rpx;
    padding: 40rpx;
    padding-right: 0;
    background-color: #ffffff;
    font-size: 28rpx;
    .default {
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2rpx $u-border-color;
      line-height: 64rpx;
      .tips {
        font-size: 24rpx;
      }
      .right {
      }
    }
  }
}
.addSite {
  display: flex;
  justify-content: space-around;
  width: 600rpx;
  line-height: 100rpx;
  position: absolute;
  bottom: 30rpx;
  left: 80rpx;
  background-color: red;
  border-radius: 60rpx;
  font-size: 30rpx;
  .add {
    display: flex;
    align-items: center;
    color: #ffffff;
    .icon {
      margin-right: 10rpx;
    }
  }
}
</style>
